<!DOCTYPE html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <title>Sheet scope</title>
  <script src="../../../../webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="../../../polymer.html">
  <script src="../../../../tools/test/htmltest.js"></script>
  <script src="../../../../tools/test/chai/chai.js"></script>
  <style>
  </style>
</head>
<body>
  <x-stylish></x-stylish>
  <x-stylish></x-stylish>
  <x-stylish></x-stylish>
  <x-stylish></x-stylish>
  <x-stylish></x-stylish>
  <x-stylish></x-stylish>

  <div id="node1" class="global-stylish controller-stylish2">1</div>
  <div id="node2" class="controller-stylish controller-stylish2">2</div>
  <div id="node3" class="yellow12">3</div>
  <div id="node4" class="red1">4</div>

  <x-other></x-other>
  <x-other></x-other>
  <x-other></x-other>
  <x-other></x-other>
  <x-other></x-other>
  <x-other></x-other>

  <polymer-element name="x-stylish" cache-csstext>
    <template>
      <link rel="stylesheet" href="sheet1.css" polymer-scope="global">
      <link rel="stylesheet" href="sheet2.css" polymer-scope="controller">
      <style polymer-scope="global">
        .global-stylish {
          background: red;
        }
      </style>
      <style polymer-scope="controller">
        .controller-stylish {
          background: blue;
        }
      </style>
      <style polymer-scope="controller">
        .controller-stylish2 {
          font-style: italic;
        }
      </style>
      stylish
    </template>
    <script>
      Polymer('x-stylish', {
        attached: function() {
          this.installControllerStyles();
        }
      });
    </script>
  </polymer-element>

  <polymer-element name="x-other" noscript>
    <template>
      <x-stylish></x-stylish>
      <x-stylish></x-stylish>
      <x-stylish></x-stylish>
      <x-stylish></x-stylish>
      <x-stylish></x-stylish>
      <x-stylish></x-stylish>
      <div id="inner1" class="controller-stylish controller-stylish2">stylish</div>
      <div id="inner2" class="yellow12"></div>
    </template>
  </polymer-element>

  <script>
    document.addEventListener('polymer-ready', function() {
      
      var xother = document.querySelector('x-other');
      
      function test(node, propertyName, value) {
        var computed = getComputedStyle(node)[propertyName];
        chai.assert.equal(computed, value, 'computed ' + propertyName + 
            ' matches expected.');
      }
      var node1 = document.querySelector('#node1');
      var node2 = document.querySelector('#node2');
      var node3 = document.querySelector('#node3');

      test(node1, 'backgroundColor', 'rgb(255, 0, 0)');
      test(node1, 'fontStyle', 'italic');
      test(node2, 'backgroundColor', 'rgb(0, 0, 255)');
      test(node2, 'fontStyle', 'italic');
      test(node3, 'backgroundColor', 'rgb(255, 255, 0)');
      test(node4, 'backgroundColor', 'rgb(255, 0, 0)');
      test(xother.$.inner1, 'backgroundColor', 'rgb(0, 0, 255)');
      test(xother.$.inner1, 'fontStyle', 'italic');
      test(xother.$.inner2, 'backgroundColor', 'rgb(255, 255, 0)');

      // de-duping styles.
      if (window.ShadowDOMPolyfill) {
        chai.assert.equal(document.head.querySelectorAll('style[element=x-stylish-controller]').length, 2, 'styles are properly de-duped');
      } else {
        chai.assert.equal(document.head.querySelectorAll('style[element=x-stylish-controller').length, 1, 'styles are properly de-duped');
        chai.assert.equal(xother.shadowRoot.querySelectorAll('style[element=x-stylish-controller').length, 1, 'styles are properly de-duped');
      }
      done();
    });
  </script>
</body>
</html>
